<!DOCTYPE html>
<html lang="en">

<head>
    <title>html5</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> </head>

<body>
    <canvas id="mycanvas" width="200" height="200" 
        style="border:1px sold #000000";></canvas>
    <script>
        var c = document.getElementById("mycanvas");
        var ctx = c.getContext("2d")
        // fillStyle设置为字符串解析为CSS 颜色，
        ctx.fillStyle = "#FFFF00" 
        // 当设置为一个 CanvasGradient 或 CanvasPattern 对象
        // 通过使用指定的渐变或模式来完成填充
        ctx.fillRect(0, 0, 150, 75)

        ctx.moveTo(0, 0)
        ctx.lineTo(200, 200)
        ctx.stroke()

        ctx.beginPath()
        ctx.arc(60, 60, 40, 0, 2 * Math.PI)
        ctx.stroke()

        ctx.fillStyle = "#000000"
        ctx.font = "30px Arial"
        ctx.fillText("Hello Canvas", 10, 50)
    </script> </body>

</html>